import React, { useEffect, useState } from 'react'
import { useParams } from 'react-router-dom'
import http from '../../api/http'
import { Button, List, message, Modal } from 'antd'
import { Input, Space } from 'antd';

const { TextArea } = Input;

function Index() {
  const { id } = useParams()
  console.log(id, 'id')

  const [detail, setDetail] = useState([])
  const [value, setValue] = useState('');
  const [value1, setValue1] = useState('');

  const fetchDetail = async () => {
    const res = await http.get(`/article/${id}`)
    console.log(res, '详情')
    setDetail(res.data)
  }

  useEffect(() => {
    fetchDetail()
  }, [])

  // 发送评论
  const handleSend = async () => {
    const res = await http.post('/discuss', {
      userId: 47529555,// 47529555 用户id
      content: value,
      articleId: Number(id)
    })
    console.log(res, '发送评论')
    fetchDetail()
    setValue('')
    message.success('评论成功')
  }

  const [open, setOpen] = useState(false);
  const [confirmLoading, setConfirmLoading] = useState(false);

  const handleOk = async () => {
    if (!value1.trim()) {
      message.error('回复不能为空')
      setOpen(false)
      return
    }
    const res = await http.post('/discuss', {
      userId: 47529555,// 47529555 用户id
      content: value1,
      articleId: Number(id),
      commentId: open.commentId
    })
    console.log(res, '回复评论')
    fetchDetail()
    setValue1('')
    setOpen(false)
    message.success('回复成功')
  };

  const handleCancel = () => {
    console.log('Clicked cancel button');
    setOpen(false);
  };

  return (
    <div>
      <h1>{detail.title}</h1>
      <p>标签:{detail.tags}</p>
      <p>
        <span>创建时间: {detail.createdAt}</span>
        <span>浏览量: {detail.viewCount}</span>
      </p>
      <hr />
      <TextArea
        value={value}
        onChange={(e) => setValue(e.target.value)}
        placeholder="请输入评论..."
        autoSize={{ minRows: 3, maxRows: 5 }}
      />
      <Button color='primary' variant="filled" onClick={() => handleSend()}>
        发送评论
      </Button>
      <h1>评论区:</h1>
      <div>
        <div>
          <List
            dataSource={detail.comments}
            renderItem={(item) => (
              <div>
                <Space align='start'>
                  <img style={{ width: '40px', height: '40px', borderRadius: '50%' }} src="" alt="" />
                  <div>
                    <div>
                      {item.user.createdAt}&ensp;
                      <span>{item.user.username}</span>
                    </div>
                    {item.content}
                    <Button color='pink' variant="filled" onClick={() => setOpen({ username: item.user.username, commentId: item.id })}>
                      回复
                    </Button>
                    {
                      item.replies && item.replies.length > 0 && <div>
                        <List
                          dataSource={item.replies}
                          renderItem={(it) => (
                            <div>
                              <Space align='start'>
                                <img style={{ width: '40px', height: '40px', borderRadius: '50%' }} src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" alt="" />
                                <div>
                                  <div>
                                    {it.user.createdAt}&ensp;
                                    <span>{it.user.username}</span>
                                  </div>
                                  {it.content}
                                </div>
                              </Space>
                            </div>
                          )}
                        />
                      </div>
                    }
                  </div>
                </Space>
              </div>
            )}
          />
        </div>
      </div>
      <Modal
        title='回复评论'
        open={open}
        onOk={handleOk}
        confirmLoading={confirmLoading}
        onCancel={handleCancel}
      >
        <TextArea
          value={value1}
          onChange={(e) => setValue1(e.target.value)}
          placeholder="请输入回复评论..."
          autoSize={{ minRows: 3, maxRows: 5 }}
        />
      </Modal>
      <a href="#">
        <Button color='purple' variant="filled">
          回到顶部
        </Button>
      </a>

    </div>
  )
}

export default Index
